<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.css">
		<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
		<title>课程</title>
		
		<style>
		body{
			font-size: 16px;
			font-family:SimSun;
			color: black;
			font-weight: bold;
			background:url(6.jpg) no-repeat;
		    opacity: 0.6;
			background-size: 100% 100%;
			}
		.containner-course{
			text-align: center;
			width:1000px;
			margin-left: 455px;
			margin-top: 72px;
			height: 664px;		
			border: 1px black;
		
		}
		table{
		border: 3px;
		position: absolute;		
		height:600px;	  
		BORDER-COLLAPSE: collapse;
		background-color:#E0E0E0;
		}
		tr td{
			border: 4px solid #F1F1F1;		
		}
		td.fault{
			background-color: #C1C1C1;
			opacity: 0.7;
		}
		td.fault:hover{
			background-color: #ecffff;
		}
		.but1{
			width: 100px;
			height: 60px;
			cursor: pointer;			
		}
		.but2{
			width: 100px;
			height: 60px;
			cursor: pointer;
					
		}
		.xz{
			width: 56px;
			height: 34px;
			cursor: pointer;
			background-color: #ecffff;			
		}
		.yl{
			width: 59px;
			height: 49px;
			cursor: pointer;
			background-color: #ecffff;			
		}
		tr a{
					color: black;
					font-size: 14px;
					font-weight: bold;
					font-family: arial;
					display: block;
					text-align: center;
					cursor: pointer;
					text-decoration: none;
		}
		.bj{
			height: 22px;
			width: 139px;
			float: left;
		
			text-align: center;
			
		}
		.bjb{
			height: 40px;
			width: 138px;
			float: left;
		
			text-align: center;
			
		}
		</style>
		
	</head>
<body>
	

	<div class="containner-course">		
		<table align="top">
			<tr style="height: 100px;text-align: center;">
				<td class="fault"  width="300"><button class="but1" id="11">课程信息</button></td>
				<td width="300">
					<div  id="box" style="height: 100px;width:296px;text-align: center;">
					   <div class="bj">课程名称:</div><div class="bj" id="111"></div>
			           <div class="bj">授课教师:</div><div class="bj" id="112"></div>
			           <div class="bj">上课地点:</div><div class="bj" id="113"></div> 
			           <div class="bj">课程起止时间：</div><div class="bj" id="114"></div>
			           
					    <script type="text/javascript">
								$("#11").click(function(){
						          $.ajax({
						                type: "get",
						                url: "course_info1.json",
						                dataType: "json",
						                data: {
						                    id: $('.but1').val(),
									    },
									    error : function() {
									    alert('请求失败 ');
								        },
						　　　　　　　　　       success: function(result){
						                addBox(result);
						                }
						            });
						        });
						        function addBox(result){
						                //result是一个集合,所以需要先遍历
							            $.each(result,function(index,obj){            
							                $("#111").append(obj['coursename']);
							                $("#112").append(obj['courseteacher']);
							                $("#113").append(obj['courselocation']);
							                $("#114").append(obj['coursetime']);	              
							            });
						        }		
					    </script> 
	
			           
				    </div>
				</td>
			</tr>
			 
			 
			<tr style="height: 100px;text-align: center;">
				<td class="fault"  width="300"><button class="but2" id="22">课程资料</button></td>
				<td width="300">
				   	<div style="height: 100px;width:296px;text-align: center;">
					   <div  class="bjb" id="bj7">PPT/文档</div>
			           <div  class="bjb" ><button class="yl" id="303">在线预览</button></div><div class="bj" ><button class="xz" id="202">下载</button></div>
			        
				    </div>
				</td>
			</tr>
		</table>
	</div>
<!--<script type="text/javascript">
		$("#but1").click(function(){
          $.ajax({
                type: "get",
                url: "course_info.json",
                dataType: "json",
                data: {
                    stuclass: $('form input[type=text]').val(),
			    },
			    error : function() {
			    alert('请求失败 ');
		        },
　　　　　　　　　       success: function(result){
                addBox(result);
                }
            });
        });
        function addBox(result){
                //result是一个集合,所以需要先遍历
	            $.each(result,function(index,obj){
	            
	                $("#111").append(obj['coursename']);
	                $("#112").append(obj['courseteacher']);
	                $("#113").append(obj['courselocation']);
	                $("#114").append(obj['coursetime']);
	              
	            });
        }
		
	</script>-->
</body>
</html>
